<!-- 可拖拽的小球 封装 -->
<template>
	<view
		class="backHome"
		ref="floatButton"
		:style="{
			width: itemWidth + 'rpx',
			height: itemHeight + 'rpx',
			right: right + 'rpx',
			top: top + 'rpx'
		}"
	>
		<view class="num_box">
		{{ gillList.number }}
		</view>
		<!-- <img @click="showPopup" :src="imgUrl + 'static/monbaby-a072074d.png'" alt="" /> -->
		<u--image width="122rpx" height="164rpx" :src="imgUrl + 'sprit.gif'" alt=""></u--image>
		<view class="start" v-if="gillList.state == 3" @click="start">开始</view>
		<u-count-down @finish="onEnd" class="timer" style="font-size: 24rpx" v-if="gillList.time && gillList.state == 2" :time="timeOutSeconds" format="HH:mm:ss"></u-count-down>
		<view class="start" v-if="gillList.time && gillList.state == 1" @click="start">收取</view>
		<!-- 转增弹框 -->
		<!-- 	<u-popup bgColor='transparent' customStyle='width:500rpx;height:300rpx;position:relative' :show="show" @close="close" mode="center" closeable>
			<view>
				  <u--input
				  customStyle='width:400rpx;position:absolute;top:100rpx;left:50rpx'
				    placeholder="请输入手机号"
				    border="surround"
				    v-model="value"
				  ></u--input>
			</view>
			<view class="">
				取消
			</view>
			<view class="">
				转增
			</view>
		</u-popup> -->
	</view>
</template>
<script>
import config from '@/config';
import { getGill, signIn, sendOther } from '@/api/index.js';
export default {
	name: 'BackHome',
	props: {
		itemWidth: {
			// 悬浮按钮宽度
			type: Number,
			timer: null,
			default: 40
		},
		itemHeight: {
			// 悬浮按钮高度
			type: Number,
			default: 50
		},
		gapWidth: {
			// 距离左右两边距离
			type: Number,
			default: 0
		},
		coefficientHeight: {
			// 从上到下距离比例
			type: Number,
			default: 0.72
		}
	},
	data() {
		return {
			ssicId: '',
			clientWidth: 0,
			clientHeight: 0,
			currentTop: 0,
			right: 80,
			top: 120,
			show: false,
			timeOutSeconds: 0,
			gillList: {},
			phone: null,
			state: 0,
			imgUrl: config.gillUrl,
			gillList: {},
			show: false,
			timeOutSeconds: 0,
			gillList: {},
			phone: null,
			state: 0
		};
	},
	created() {
		this.getGillDetial();
	},
	onShow() {
		this.start();
		this.getGillDetial();
	},
	onLoad() {},
	methods: {
		async start() {
			const data = await signIn();
			if (data.code == 200) {
				if (data.data.code === 202) {
					// 收取
					this.$modal.showToast(data.msg);
					this.getGillDetial();
				} else if (data.data.code === 201) {
					// 开始
					this.$modal.showToast(data.msg);
					this.getGillDetial();
				} else {
					this.$modal.showToast(data.msg);
				}
			}
		},
		async getGillDetial() {
			const data = await getGill();
			this.gillList = data.data;
			if (this.gillList.time && this.gillList.state == 2) {
				this.state = data.data.state;
				const startDate = new Date();
				const endDate = new Date(this.gillList.time);
				const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
				this.timeOutSeconds = Math.floor(timeDiff); // 舍去小数部分，获取整数秒数
			}
		},
		open() {
			// console.log('open');
		},
		onEnd() {
			this.gillList.state = 1;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="less" scoped>
::v-deep .u-count-down__text {
	font-size: 24rpx;
	color: #e97f44 !important;
}
.timer {
	margin-left: 20rpx;
	margin-top: -25rpx;
}
input {
	position: absolute;
	width: 80%;
	border-radius: 5px;
	height: 35px;
	border: none;
	margin: -40px 30px 0;
	background-color: #0d0e12;
	color: #ccc;
	font-weight: 800;
	font-family: appletxt;
	font-size: 15px;
	padding-top: 2px;
	padding-left: 1ch;
}
input::-webkit-input-placeholder {
	color: #ccc;
	font-weight: 800;
	font-family: appletxt;
	font-size: 15px;
	position: absolute;
}
.send-other {
	position: absolute;
	top: 28px;
	left: 45.1%;
	font-size: 15px;
	color: #fff;
	font-weight: 800;
	font-family: appletxt;
}
.start {
	color: #fff;
	width: 100rpx;
	font-size: 12px;
	margin-left: 40rpx;
	margin-top: -10rpx;
	font-weight: 800;
	font-family: appletxt;
}
::v-deep .u-count-down__text {
	color: #fff;
}
::v-deep .van-popup {
	width: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 180px;
	background: none;
	z-index: 10000;
}
.maxomr {
	width: 280px !important;
	height: 180px !important;
	position: relative;
}
.buttonp {
	position: absolute;
	margin-top: 90px;
	button {
		width: 8ch;
		height: 30px;
		border-radius: 5px;
		border: none;
		margin-left: 180px;
		font-weight: 800;
		font-size: 15px;
		font-family: appletxt;
		color: #7e4529;
		background-color: #e97f44;
	}
}
.buttonp1 {
	position: absolute;
	margin-top: 90px;
	button {
		width: 80px;
		height: 30px;
		border-radius: 5px;
		border: none;
		margin-left: 25px;
		font-weight: 800;
		font-size: 15px;
		font-family: appletxt;
		background-color: #e97f44;
		color: #7e4529;
	}
}
.time-txt {
	color: #f0dcc0;
	font-size: 24rpx;
	font-weight: 800;
	font-family: appletxt;
}
.backHome {
	position: fixed;
	top: 120rpx;
	right: 15rpx;
	z-index: 10000;
	// position: relative;

	.num_box {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		background-color: #b2c000;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50%;
		font-weight: 800;
		z-index: 99;
		line-height: 34rpx;
		text-align: center;
	}
}
</style>
